<!DOCTYPE HTML>
<html lang="en" >
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>动画 | JoMin·个人笔记</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.6.7">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../../gitbook/style.css">
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-search/search.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-fontsettings/website.css">
        
    
    

        
    
    
    <link rel="next" href="../../md/css/13、容器居中方法.html" />
    
    
    <link rel="prev" href="../../md/css/11、阴影设置.html" />
    

        
    </head>
    <body>
        
        
    <div class="book"
        data-level="12"
        data-chapter-title="动画"
        data-filepath="md/css/12、自定义动画.md"
        data-basepath="../.."
        data-revision="Thu Aug 23 2018 15:14:40 GMT+0800 (中国标准时间)"
        data-innerlanguage="">
    

<div class="book-summary">
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../../index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" data-path="md/css/1、css的引入方式.html">
            
                
                    <a href="../../md/css/1、css的引入方式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.</b>
                        
                        css的引入方式
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2" data-path="img/gitbook的安装.html">
            
                
                    <a href="../../img/gitbook的安装.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.</b>
                        
                        gitbook的安装
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3" data-path="md/css/3、常用的标签.html">
            
                
                    <a href="../../md/css/3、常用的标签.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.</b>
                        
                        常用的标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4" data-path="md/css/4、表格的使用.html">
            
                
                    <a href="../../md/css/4、表格的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.</b>
                        
                        表格的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="5" data-path="md/css/5、表单.html">
            
                
                    <a href="../../md/css/5、表单.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.</b>
                        
                        表单
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6" data-path="md/css/6、a标签的使用.html">
            
                
                    <a href="../../md/css/6、a标签的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.</b>
                        
                        a标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="7" data-path="md/css/7、盒子模型.html">
            
                
                    <a href="../../md/css/7、盒子模型.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>7.</b>
                        
                        盒子模型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="8" data-path="md/css/8、浮动.html">
            
                
                    <a href="../../md/css/8、浮动.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>8.</b>
                        
                        浮动
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="9" data-path="md/css/9、css常见问题.html">
            
                
                    <a href="../../md/css/9、css常见问题.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>9.</b>
                        
                        css常见问题
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="10" data-path="md/css/10、位置定位.html">
            
                
                    <a href="../../md/css/10、位置定位.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>10.</b>
                        
                        位置定位
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="11" data-path="md/css/11、阴影设置.html">
            
                
                    <a href="../../md/css/11、阴影设置.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>11.</b>
                        
                        阴影设置
                    </a>
            
            
        </li>
    
        <li class="chapter active" data-level="12" data-path="md/css/12、自定义动画.html">
            
                
                    <a href="../../md/css/12、自定义动画.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>12.</b>
                        
                        动画
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="13" data-path="md/css/13、容器居中方法.html">
            
                
                    <a href="../../md/css/13、容器居中方法.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>13.</b>
                        
                        容器居中
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="14" data-path="md/css/移动端/移动端.html">
            
                
                    <a href="../../md/css/移动端/移动端.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>14.</b>
                        
                        移动端
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="14.1" data-path="md/css/移动端/1、移动端第一节课.html">
            
                
                    <a href="../../md/css/移动端/1、移动端第一节课.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>14.1.</b>
                        
                        移动端第一节课
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="14.2" data-path="md/css/移动端/2、移动端小问题.html">
            
                
                    <a href="../../md/css/移动端/2、移动端小问题.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>14.2.</b>
                        
                        移动端小问题
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="15" data-path="md/css/flex布局/flex.html">
            
                
                    <a href="../../md/css/flex布局/flex.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>15.</b>
                        
                        flex弹性盒子
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="15.1" data-path="md/css/flex布局/1、flex布局.html">
            
                
                    <a href="../../md/css/flex布局/1、flex布局.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>15.1.</b>
                        
                        flex布局
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="16" data-path="md/css/16、fullpage的使用.html">
            
                
                    <a href="../../md/css/16、fullpage的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>16.</b>
                        
                        fullpage的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="17" data-path="md/css/响应式布局/bootstrap.html">
            
                
                    <a href="../../md/css/响应式布局/bootstrap.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>17.</b>
                        
                        响应式布局
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="17.1" data-path="md/css/响应式布局/1、Bootstrap.html">
            
                
                    <a href="../../md/css/响应式布局/1、Bootstrap.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>17.1.</b>
                        
                        Bootstrap
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="17.2" data-path="md/css/响应式布局/2、媒体查询.html">
            
                
                    <a href="../../md/css/响应式布局/2、媒体查询.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>17.2.</b>
                        
                        媒体查询
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="18" data-path="md/css/JavaScript/JavaScript.html">
            
                
                    <a href="../../md/css/JavaScript/JavaScript.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.</b>
                        
                        JavaScript
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="18.1" data-path="md/css/JavaScript/1、JavaScript数据类型.html">
            
                
                    <a href="../../md/css/JavaScript/1、JavaScript数据类型.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.1.</b>
                        
                        JS数据类型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.2" data-path="md/css/JavaScript/2、数据类型的转换.html">
            
                
                    <a href="../../md/css/JavaScript/2、数据类型的转换.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.2.</b>
                        
                        数据类型的转换
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.3" data-path="md/css/JavaScript/3、运算符.html">
            
                
                    <a href="../../md/css/JavaScript/3、运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.3.</b>
                        
                        运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.4" data-path="md/css/JavaScript/4、赋值运算符.html">
            
                
                    <a href="../../md/css/JavaScript/4、赋值运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.4.</b>
                        
                        赋值运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.5" data-path="md/css/JavaScript/5、比较运算符.html">
            
                
                    <a href="../../md/css/JavaScript/5、比较运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.5.</b>
                        
                        比较运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.6" data-path="md/css/JavaScript/6、逻辑操作符.html">
            
                
                    <a href="../../md/css/JavaScript/6、逻辑操作符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.6.</b>
                        
                        逻辑操作符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.7" data-path="md/css/JavaScript/7、条件运算符.html">
            
                
                    <a href="../../md/css/JavaScript/7、条件运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.7.</b>
                        
                        条件运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.8" data-path="md/css/JavaScript/8、位运算符.html">
            
                
                    <a href="../../md/css/JavaScript/8、位运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.8.</b>
                        
                        位运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.9" data-path="md/css/JavaScript/9、条件语句.html">
            
                
                    <a href="../../md/css/JavaScript/9、条件语句.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.9.</b>
                        
                        条件语句
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.10" data-path="md/css/JavaScript/10、循环语句.html">
            
                
                    <a href="../../md/css/JavaScript/10、循环语句.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.10.</b>
                        
                        循环语句
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.11" data-path="md/css/JavaScript/11、break和continue.html">
            
                
                    <a href="../../md/css/JavaScript/11、break和continue.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.11.</b>
                        
                        break和continue
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.12" data-path="md/css/JavaScript/12、for循环.html">
            
                
                    <a href="../../md/css/JavaScript/12、for循环.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.12.</b>
                        
                        for循环
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.13" data-path="md/css/JavaScript/13、多层循环.html">
            
                
                    <a href="../../md/css/JavaScript/13、多层循环.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.13.</b>
                        
                        多层循环
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.14" data-path="md/css/JavaScript/14、for-in循环.html">
            
                
                    <a href="../../md/css/JavaScript/14、for-in循环.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.14.</b>
                        
                        for-in循环
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.15" data-path="md/css/JavaScript/15、try-catch语句.html">
            
                
                    <a href="../../md/css/JavaScript/15、try-catch语句.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.15.</b>
                        
                        try-catch语句
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.16" data-path="md/css/JavaScript/16、函数.html">
            
                
                    <a href="../../md/css/JavaScript/16、函数.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.16.</b>
                        
                        函数
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.17" data-path="md/css/JavaScript/17、循环排序.html">
            
                
                    <a href="../../md/css/JavaScript/17、循环排序.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.17.</b>
                        
                        循环排序
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.18" data-path="md/css/JavaScript/18、es6语法.html">
            
                
                    <a href="../../md/css/JavaScript/18、es6语法.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.18.</b>
                        
                        es6语法
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.19" data-path="md/css/JavaScript/19、数组对象.html">
            
                
                    <a href="../../md/css/JavaScript/19、数组对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.19.</b>
                        
                        数组对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.20" data-path="md/css/JavaScript/20、date对象.html">
            
                
                    <a href="../../md/css/JavaScript/20、date对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.20.</b>
                        
                        date对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.21" data-path="md/css/JavaScript/21、Boolean对象.html">
            
                
                    <a href="../../md/css/JavaScript/21、Boolean对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.21.</b>
                        
                        Boolean对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.22" data-path="md/css/JavaScript/22、数学对象.html">
            
                
                    <a href="../../md/css/JavaScript/22、数学对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.22.</b>
                        
                        数学对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="18.23" data-path="md/css/JavaScript/23、对象的创建.html">
            
                
                    <a href="../../md/css/JavaScript/23、对象的创建.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>18.23.</b>
                        
                        对象的创建
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="19" data-path="md/css/BOM/BOM.html">
            
                
                    <a href="../../md/css/BOM/BOM.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>19.</b>
                        
                        BOM
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="19.1" data-path="md/css/BOM/1、window对象.html">
            
                
                    <a href="../../md/css/BOM/1、window对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>19.1.</b>
                        
                        window对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="19.2" data-path="md/css/BOM/2、navigator对象.html">
            
                
                    <a href="../../md/css/BOM/2、navigator对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>19.2.</b>
                        
                        navigator对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="19.3" data-path="md/css/BOM/3、screen对象.html">
            
                
                    <a href="../../md/css/BOM/3、screen对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>19.3.</b>
                        
                        screen对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="19.4" data-path="md/css/BOM/4、history对象.html">
            
                
                    <a href="../../md/css/BOM/4、history对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>19.4.</b>
                        
                        history对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="19.5" data-path="md/css/BOM/5、location对象.html">
            
                
                    <a href="../../md/css/BOM/5、location对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>19.5.</b>
                        
                        location对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="19.6" data-path="md/css/BOM/6、cookie对象.html">
            
                
                    <a href="../../md/css/BOM/6、cookie对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>19.6.</b>
                        
                        cookie对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="19.7" data-path="md/css/BOM/7、html5本地存储.html">
            
                
                    <a href="../../md/css/BOM/7、html5本地存储.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>19.7.</b>
                        
                        html5本地存储
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="20" data-path="md/css/DOM/DOM.html">
            
                
                    <a href="../../md/css/DOM/DOM.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>20.</b>
                        
                        DOM
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="20.1" data-path="md/css/DOM/1、DOM介绍.html">
            
                
                    <a href="../../md/css/DOM/1、DOM介绍.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>20.1.</b>
                        
                        DOM介绍
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="20.2" data-path="md/css/DOM/2、元素对象.html">
            
                
                    <a href="../../md/css/DOM/2、元素对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>20.2.</b>
                        
                        元素对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="20.3" data-path="md/css/DOM/3、DOM事件1.html">
            
                
                    <a href="../../md/css/DOM/3、DOM事件1.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>20.3.</b>
                        
                        DOM事件1
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="20.4" data-path="md/css/DOM/4、DOM事件2.html">
            
                
                    <a href="../../md/css/DOM/4、DOM事件2.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>20.4.</b>
                        
                        DOM事件2
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="20.5" data-path="md/css/DOM/5、移动端事件.html">
            
                
                    <a href="../../md/css/DOM/5、移动端事件.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>20.5.</b>
                        
                        移动端事件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="20.6" data-path="md/css/DOM/6、ajax.html">
            
                
                    <a href="../../md/css/DOM/6、ajax.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>20.6.</b>
                        
                        ajax
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="21" data-path="md/css/jQuery/jQuery.html">
            
                
                    <a href="../../md/css/jQuery/jQuery.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>21.</b>
                        
                        jQuery
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="21.1" data-path="md/css/jQuery/1、jQuery第一节课.html">
            
                
                    <a href="../../md/css/jQuery/1、jQuery第一节课.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>21.1.</b>
                        
                        jQuery第一节课
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="21.2" data-path="md/css/jQuery/2、jQuery第二节课.html">
            
                
                    <a href="../../md/css/jQuery/2、jQuery第二节课.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>21.2.</b>
                        
                        jQuery第二节课
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="21.3" data-path="md/css/jQuery/3、正则表达式.html">
            
                
                    <a href="../../md/css/jQuery/3、正则表达式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>21.3.</b>
                        
                        正则表达式
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="21.4" data-path="md/css/jQuery/4、jQuery第三节课.html">
            
                
                    <a href="../../md/css/jQuery/4、jQuery第三节课.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>21.4.</b>
                        
                        jQuery第三节课
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="21.5" data-path="md/css/jQuery/5、ajax.html">
            
                
                    <a href="../../md/css/jQuery/5、ajax.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>21.5.</b>
                        
                        ajax
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../../" >JoMin·个人笔记</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <h1 id="&#x52A8;&#x753B;">&#x52A8;&#x753B;</h1>
<h3 id="animation&#x548C;transition&#x533A;&#x522B;&#xFF1A;">animation&#x548C;transition&#x533A;&#x522B;&#xFF1A;</h3>
<p>transition&#x9700;&#x8981;&#x89E6;&#x53D1;&#x4E00;&#x4E2A;&#x4E8B;&#x4EF6;&#x624D;&#x4F1A;&#x968F;&#x7740;&#x65F6;&#x95F4;&#x6539;&#x53D8;&#x5176;CSS&#x5C5E;&#x6027;&#xFF1B;<br>
animation&#x5728;&#x4E0D;&#x9700;&#x8981;&#x89E6;&#x53D1;&#x4EFB;&#x4F55;&#x4E8B;&#x4EF6;&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x663E;&#x5F0F;&#x7684;&#x968F;&#x65F6;&#x95F4;&#x53D8;&#x5316;&#x6765;&#x6539;&#x53D8;&#x5143;&#x7D20;CSS&#x5C5E;&#x6027;</p>
<h1 id="animation-&#x81EA;&#x5B9A;&#x4E49;&#x52A8;&#x753B;">animation &#x81EA;&#x5B9A;&#x4E49;&#x52A8;&#x753B;</h1>
<p><strong>animation&#x867D;&#x7136;&#x76EE;&#x524D;&#x5F97;&#x5230;&#x8F83;&#x591A;&#x6D4F;&#x89C8;&#x5668;&#x652F;&#x6301;&#xFF0C;&#x4F46;&#x8FD8;&#x662F;&#x9700;&#x8981;&#x6DFB;&#x52A0;&#x6D4F;&#x89C8;&#x5668;&#x524D;&#x7F00;&#xFF01;&#xFF01;&#xFF01;</strong></p>
<table>
<thead>
<tr>
<th>&#x5C5E;&#x6027;</th>
<th>&#x63CF;&#x8FF0;</th>
<th>&#x503C;</th>
</tr>
</thead>
<tbody>
<tr>
<td>animation-name</td>
<td>&#x5173;&#x952E;&#x5E27;&#x52A8;&#x753B;&#x540D;&#x5B57;</td>
<td></td>
</tr>
<tr>
<td>animation-duration</td>
<td>&#x52A8;&#x753B;&#x64AD;&#x653E;&#x65F6;&#x95F4;</td>
<td></td>
</tr>
<tr>
<td>animation-delay</td>
<td>&#x52A8;&#x753B;&#x5EF6;&#x8FDF;&#x65F6;&#x95F4;&#xFF08;&#x53EA;&#x4F1A;&#x51FA;&#x73B0;&#x5728;&#x7B2C;&#x4E00;&#x6B21;&#x7684;&#x6548;&#x679C;&#xFF09;</td>
<td></td>
</tr>
<tr>
<td>animation-direction</td>
<td>&#x63A7;&#x5236;&#x52A8;&#x753B;&#x64AD;&#x653E;&#x987A;&#x5E8F;</td>
<td>1. alternate &#x6B63;&#x5E38;&#x64AD;&#x653E; <br> 2.reverse &#x5012;&#x7740;&#x64AD;&#x653E;<br> 3.alternate-reverse  &#x6765;&#x56DE;&#x64AD;&#x653E;</td>
</tr>
<tr>
<td>animation-iteration-count</td>
<td>&#x81EA;&#x5B9A;&#x4E49;&#x52A8;&#x753B;&#x64AD;&#x653E;&#x6B21;&#x6570;  &#xFF08;&#x652F;&#x6301;&#x6B21;&#x6570; &#x76F4;&#x63A5;&#x586B;&#x5199;&#x6570;&#x5B57;&#xFF09;</td>
<td>infinite &#x65E0;&#x9650;&#x6B21;&#x64AD;&#x653E; / <code>&#x6570;&#x5B57;</code></td>
</tr>
<tr>
<td>animation-fill-mode</td>
<td>&#x63A7;&#x5236;&#x64AD;&#x653E;&#x7ED3;&#x675F;&#x540E;&#x7684;&#x72B6;&#x6001;</td>
<td>1.none(&#x9ED8;&#x8BA4;&#x503C;)&#xFF0C;&#x52A8;&#x753B;&#x7ED3;&#x675F;&#x65F6;&#x56DE;&#x5230;&#x52A8;&#x753B;&#x6CA1;&#x5F00;&#x59CB;&#x65F6;&#x7684;&#x72B6;&#x6001; <br> 2.forwards&#xFF0C;&#x52A8;&#x753B;&#x7ED3;&#x675F;&#x540E;&#x7EE7;&#x7EED;&#x5E94;&#x7528;&#x6700;&#x540E;&#x5173;&#x952E;&#x5E27;&#x7684;&#x4F4D;&#x7F6E;&#xFF0C;&#x5373;&#x505C;&#x7559;&#x5728;&#x7ED3;&#x675F;&#x72B6;&#x6001;<br>3.backwards&#xFF0C;&#x8BA9;&#x52A8;&#x753B;&#x56DE;&#x5230;&#x7B2C;&#x4E00;&#x5E27;&#x7684;&#x72B6;&#x6001;<br>4.both&#xFF1A;&#x8F6E;&#x6D41;&#x5E94;&#x7528;forwards&#x548C;backwards&#x89C4;&#x5219;</td>
</tr>
<tr>
<td>animaiton-play-state</td>
<td>&#x52A8;&#x753B;&#x64AD;&#x653E;&#x7684;&#x72B6;&#x6001;</td>
<td>1.paused &#x6682;&#x505C;<br> 2. running &#x64AD;&#x653E;</td>
</tr>
</tbody>
</table>
<h4 id="keyframes-&#x5173;&#x952E;&#x5E27;">@keyframes &#x5173;&#x952E;&#x5E27;</h4>
<ul>
<li>frame&#xFF08;&#x5E27;&#xFF09; &#x901A;&#x5E38;&#x7528;&#x4E8E;&#x52A8;&#x753B;&#x5236;&#x4F5C;&#x4E2D;&#xFF0C;&#x8868;&#x793A;&#x5176;&#x4E2D;&#x4E00;&#x4E2A;&#x753B;&#x56FE;&#xFF0C;&#x8FDE;&#x7EED;&#x7684;&#x5E27;&#x4F1A;&#x88AB;&#x79F0;&#x4F5C;&#x5E8F;&#x5217;&#x5E27;
<strong>@keyframes&#x5FC5;&#x987B;&#x8981;&#x52A0;webkit&#x524D;&#x7F00;&#x3002;</strong></li>
</ul>
<pre><code class="lang-html">    @-webkit-keyframes changeColor {
      0% { background: #c00; }
      50% { background: orange; }
      100% { background: yellowgreen; }
    }
    @keyframes changeColor {
      0% { background: #c00; }
      50% { background: orange; }
      100% { background: yellowgreen; }
    }
</code></pre>
<p>&#x53D8;&#x6362;&#xFF1A;(transform)</p>
<pre><code>            1&#x3001;&#x4F4D;&#x79FB;transform&#xFF08;x&#xFF0C;y&#xFF09;&#xFF0C;x&#x548C;y&#x5206;&#x522B;&#x4EE3;&#x8868;&#x6C34;&#x5E73;&#x65B9;&#x5411;&#x548C;&#x5782;&#x76F4;&#x65B9;&#x5411;&#x4E0A;&#x7684;&#x4F4D;&#x79FB;&#x3002;
                &#x4E5F;&#x53EF;&#x4EE5;&#x5206;&#x5F00;&#x5199;&#xFF1A;translateX&#xFF08;&#xFF09;&#xFF0C;translateY();
                &#x6CE8;&#x610F;&#xFF1A;&#x4F4D;&#x79FB;&#x7684;&#x50CF;&#x7D20;&#x662F;&#x4E0D;&#x5360;&#x4F4D;&#x7F6E;&#x7684;&#xFF0C;&#x5143;&#x7D20;&#x53EA;&#x5360;&#x81EA;&#x8EAB;&#x539F;&#x6709;&#x7684;&#x4F4D;&#x7F6E;&#x5927;&#x5C0F;&#x3002;

            2&#x3001;&#x7F29;&#x653E;scale&#xFF08;x&#xFF0C;y&#xFF09;&#xFF0C;x&#x548C;y&#x5206;&#x522B;&#x4EE3;&#x8868;&#x6C34;&#x5E73;&#x65B9;&#x5411;&#x548C;&#x5782;&#x76F4;&#x65B9;&#x5411;&#x7684;&#x7F29;&#x653E;&#x3002;
                scaleX&#xFF08;&#xFF09;&#xFF0C;scaleY&#xFF08;&#xFF09;

            3&#x3001;&#x659C;&#x5207;skew(x&#xFF0C;y)&#xFF1A;    x&#x548C;y&#x5206;&#x522B;&#x4EE3;&#x8868;&#x6C34;&#x5E73;&#x65B9;&#x5411;&#x548C;&#x5782;&#x76F4;&#x65B9;&#x5411;&#x7684;&#x659C;&#x5207;&#x7A0B;&#x5EA6;&#x3002;
                transform: skew(45deg,45deg);&#x5F53;&#x4E24;&#x4E2A;&#x503C;&#x90FD;&#x4E3A;45&#xB0;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x53EF;&#x4F7F;&#x5143;&#x7D20;&#x9690;&#x85CF;&#x3002;
                &#x6CE8;&#x610F;&#xFF1A;&#x5F53;&#x8BBE;&#x7F6E;skewX&#x6216;&#x8005;skewY&#x7684;&#x503C;&#x4E3A;90&#xB0;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x6709;&#x4E9B;&#x6D4F;&#x89C8;&#x5668;&#x4F1A;&#x51FA;&#x73B0;&#x767D;&#x5C4F;&#x95EE;&#x9898;&#x3002;

            4&#x3001;&#x65CB;&#x8F6C;rotate(x/y)&#x4EE3;&#x8868;&#x5750;&#x6807;&#x8F74;&#x65CB;&#x8F6C;
                rotateX():&#x73AF;&#x7ED5;X&#x8F74;&#x8FDB;&#x884C;&#x65CB;&#x8F6C;&#x3002;
                rotateY():&#x73AF;&#x7ED5;Y&#x8F74;&#x8FDB;&#x884C;&#x65CB;&#x8F6C;&#x3002;

            transform-origin:&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x53D8;&#x6362;&#x7684;&#x4E2D;&#x5FC3;&#x70B9;&#x4F4D;&#x7F6E;&#x3002;
                &#x9ED8;&#x8BA4;&#x503C;&#xFF1A;center
                &#x6709;&#x4E24;&#x4E2A;&#x503C;&#xFF1A;&#x5206;&#x522B;&#x4E3A;&#x6C34;&#x5E73;&#x65B9;&#x5411;&#x548C;&#x5782;&#x76F4;&#x65B9;&#x5411;&#x7684;&#x7F29;&#x653E;&#x4E2D;&#x5FC3;&#x70B9;&#xFF0C;&#x503C;&#x53EF;&#x4EE5;&#x662F;&#x65B9;&#x4F4D;&#x8BCD;&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x50CF;&#x7D20;&#x503C;&#x3002;
</code></pre>
                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../../md/css/11、阴影设置.html" class="navigation navigation-prev " aria-label="Previous page: 阴影设置"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../../md/css/13、容器居中方法.html" class="navigation navigation-next " aria-label="Next page: 容器居中"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../../gitbook/app.js"></script>

    
    <script src="../../gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-search/search.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-livereload/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"livereload":{}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
